<script setup>
import { ref } from 'vue';
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';  // 引入 useRoute
import { provide } from 'vue';
import { solutionGetService } from '@/api/solution'
import { ElMessage } from 'element-plus';
import { MdPreview } from 'md-editor-v3';
import router from '@/router';

const route = useRoute()
const solutionId = route.query.solutionId
const titleName = route.query.titleName
console.log('titleName = ' + titleName)
const solution = ref({
  userName: ''
})
provide('solutionId',solutionId)

onMounted(async() => {
  // await provide('titleId',route.query.solution.titleId)
  //根据题解id查询题解内容
  const res = await solutionGetService(solutionId)
  if(res.data.status === 'success'){
    solution.value = res.data.data
    console.log(solution.value)
  }else{
    ElMessage.error(res.data.info)
  }
})

// 初始化评论数据
const comments = ref([
  {
    id: 1,
    author: '用户1',
    content: '这是第一个评论，关于题解的理解。',
    likes: 0,
    replies: [],
    showReplyInput: false,
    replyContent: '',
  },
  {
    id: 2,
    author: '用户3',
    content: '这是第二个评论，感觉这个题解有点复杂。',
    likes: 0,
    replies: [],
    showReplyInput: false,
    replyContent: '',
  },
]);

// 新评论输入内容
const newCommentContent = ref('');

// 切换回复输入框的显示与隐藏
const toggleReplyInput = (index) => {
  comments.value[index].showReplyInput = !comments.value[index].showReplyInput;
};

// 提交新的评论
const submitNewComment = () => {
  if (newCommentContent.value.trim()) {
    comments.value.push({
      id: comments.value.length + 1,
      author: '用户4',
      content: newCommentContent.value,
      likes: 0,
      replies: [],
      showReplyInput: false,
      replyContent: '',
    });
    newCommentContent.value = ''; // 清空输入框
  }
};

// 提交一级回复
const submitReply = (index) => {
  const comment = comments.value[index];
  if (comment.replyContent.trim()) {
    comment.replies.push({
      id: comment.replies.length + 1,
      author: '用户4',
      content: comment.replyContent,
      likes: 0,
      replies: [],
      showReplyInput: false,
      replyContent: '',
    });
    comment.replyContent = ''; // 清空输入框
    comment.showReplyInput = false; // 隐藏回复输入框
  }
};

// 切换回复回复输入框的显示与隐藏
const toggleReplyInputToReply = (replyIndex, parentIndex) => {
  comments.value[parentIndex].replies[replyIndex].showReplyInput = !comments.value[parentIndex].replies[replyIndex].showReplyInput;
};

// 提交二级回复（回复一级回复）
const submitReplyToReply = (replyIndex, parentIndex) => {
  const reply = comments.value[parentIndex].replies[replyIndex];
  if (reply.replyContent.trim()) {
    reply.replies.push({
      id: reply.replies.length + 1,
      author: '用户5',
      content: reply.replyContent,
      likes: 0,
    });
    reply.replyContent = ''; // 清空输入框
    reply.showReplyInput = false; // 隐藏回复输入框
  }
};

// 点赞功能
const likeComment = (commentIndex) => {
  comments.value[commentIndex].likes++;
};

const likeReply = (replyIndex, commentIndex) => {
  comments.value[commentIndex].replies[replyIndex].likes++;
};
</script>

<template>
  <div class="container">
    <!-- 题解区域 -->
    <section class="solution">
      <!-- 返回按钮 -->
      <div class="back-btn">
        <el-button type="text" icon="el-icon-arrow-left" @click="router.go(-1)">←返回</el-button>
      </div>
      <h1 class="title">{{ titleName }}</h1>
      <p class="author">作者：{{ solution.userName }}</p>
      <div class="solution-meta">
          <small>创建时间：{{ solution.createTime }}</small> | 
          <small>修改时间：{{ solution.updateTime }}</small>
        </div>
      <!-- <div class="content">
        <p>{{ solution.solutionContent }}</p>
      </div> -->
      <MdPreview class="solution-body" style="background: white" :modelValue="solution.solutionContent">
          </MdPreview>
    </section>

    <!-- 评论区域 -->
    <Comment solutionId></Comment>
  </div>
</template>

<style scoped>
.container {
  width: 80%;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.solution {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  .back-btn {
    margin-bottom: 20px;
  }
  /* 创建时间和修改时间 */
  .solution-meta {
    font-size: 1rem;
    color: #777;
    text-align: center;
    margin-bottom: 30px;
  }
}

.title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 3%;
  color: #333;
}

.author {
  font-size: 14px;
  text-align: center;
  margin-bottom: 2%;
  color: #555;
}

.content {
  margin-top: 15px;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.comments {
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
}

.comments h2 {
  font-size: 18px;
  color: #333;
}

.comment-input {
  margin-bottom: 20px;
}

.comment-input-textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 10px;
  resize: vertical;
}

.comment-submit-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.comment-submit-btn:hover {
  background-color: #0056b3;
}

.comment-item {
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.comment-author {
  font-weight: bold;
}

.comment-likes {
  color: #007bff;
}

.comment-content {
  margin-top: 5px;
  font-size: 14px;
  color: #555;
}

.reply-btn {
  font-size: 12px;
  color: #007bff;
  cursor: pointer;
  margin-top: 10px;
}

.reply-section {
  margin-top: 10px;
  padding-left: 20px;
}

.reply-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  margin-top: 5px;
}

.reply-submit {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 10px;
}

.reply-submit:hover {
  background-color: #0056b3;
}

.replies {
  margin-top: 15px;
  padding-left: 20px;
  border-left: 2px solid #ccc;
}

.reply-item {
  margin-top: 10px;
  background-color: #f1f1f1;
  padding: 8px;
  border-radius: 5px;
}

.reply-header {
  display: flex;
  justify-content: space-between;
}

.second-level {
  margin-top: 10px;
  background-color: #e0e0e0;
}

.reply-author {
  font-weight: bold;
  color: #007bff;
}

.reply-content {
  margin-top: 5px;
  font-size: 14px;
  color: #555;
}
</style>
